<template>
  <div class="forgot-form">
    <div class="forgot-form-inner">
      <div class="forgot-form-title">忘记您的密码<br />我们来帮您找回 ~</div>
      <div class="forgot-form-desc">
        请输入您注册时使用的邮箱账号，然后我们会发送一封邮件到该邮箱，邮件包含验证码，使用验证码验证通过后可重置您的密码。
      </div>

      <div class="forgot-form-input-title">E-mail</div>
      <div class="forgot-form-input-content">
        <el-input v-model="email" placeholder="E-mail" clearable></el-input>
      </div>

      <div class="forgot-form-login-btn nas tse" @click="toSignUp()">下一步</div>

      <div class="register-form-desc-title">
        <div>记起您的密码了 ?</div>
        <div class="nas tse" @click="toLogin()">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forgotPasswordForm',

  data() {
    return {
      email: '',
      password: ''
    }
  },

  mounted() {},

  methods: {
    toLogin() {
      this.$emit('login')
    },

    toSignUp() {
      this.$emit('signUp')
    }
  }
}
</script>
<style lang="scss" scoped>
.forgot-form {
  width: 100%;

  display: flex;
  justify-content: center;

  .forgot-form-inner {
    width: 559px;

    .forgot-form-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      color: #0e2845;
    }

    .forgot-form-desc {
      margin-top: 31px;
      margin-bottom: 84px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #828698;
    }

    .forgot-form-input-title {
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: #828698;
    }

    .forgot-form-input-content {
      margin-top: 21px;
      height: 72px;
      border: 1px solid #d7d8dd;
      border-radius: 8px;

      /deep/ .el-input__inner {
        border: 0px solid gray !important;
        border-radius: 8px !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 72px !important;
        height: 72px !important;
        color: #0e2845 !important;
      }

      /deep/ .el-input__suffix .el-input__clear {
        font-size: 20px !important;
        margin-right: 8px;
      }

      /deep/ .el-input__inner::placeholder {
        color: #cccccc;
      }
      /* 谷歌 */
      /deep/ .el-input__inner::-webkit-input-placeholder {
        color: #cccccc;
      }
      /* 火狐 */
      /deep/ .el-input__inner:-moz-placeholder {
        color: #cccccc;
      }
      /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
        color: #cccccc;
      }
    }

    .forgot-form-login-btn {
      margin-top: 55px;
      line-height: 72px;
      border-radius: 8px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      color: #f7f7f7;
      background: #f4aa69;
    }
  }

  .register-form-desc-title {
    margin-top: 40px;

    display: flex;
    align-items: center;

    :first-child {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #828698;
    }

    :last-child {
      margin-left: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #0b5596;
    }
  }
}
</style>
